<template>
  <div class="basic-container">
    <item-box title="报警管理">
      <template #content>
        <div class="content-warp">
          <div
            class="content-row"
            v-for="item in list"
            :key="item.id + 'alarm'"
          >
            <div class="row">
              <span class="flex-gap">{{ item.waringTitle }}</span>
              <span class="flex-gap1">{{ item.warningTime }}</span>
            </div>
            <div class="row">
              <div class="flex-gap">
                <span style="color: #e4a835">报警位置：</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="flex-gap1">
                <span style="color: #e4a835">报警路灯：</span>
                <span>{{ item.lampId }}</span>
                <svg-icon icon="map-icon" @click="handleFlyToPosition(item)"></svg-icon>
              </div>
            </div>
          </div>
        </div>
      </template>
    </item-box>
  </div>
</template>

<script setup>
  import ItemBox from '../ItemBox/index.vue'
  import { ref, defineEmits } from 'vue'
  import { alarmList } from '@/api/screen'

  const list = ref([])

  const emits = defineEmits([
    'onFlyToPosition'
  ])

  const getListData = async () => {
    const res = await alarmList()
    if (res.rows) {
      list.value = res.rows
    }
  }

  const handleFlyToPosition = (item) => {
    emits('onFlyToPosition', item)
  }

  getListData()
</script>

<style lang="scss" scoped>
  .basic-container {
    width: 100%;
    height: 100%;

    .content-warp {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      row-gap: 28px;
      padding-top: 52px;

      .content-row {
        font-size: 13px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-style: italic;
        color: #fefefe;
        margin-left: 18px;
        display: flex;
        flex-direction: column;
        row-gap: 7px;

        .row {
          width: calc(100% - 18px);
          display: flex;
          line-height: 19px;

          .flex-gap {
            flex: 3;
          }

          .flex-gap1 {
            flex: 4;

            .svg-icon {
              width: 15px;
              height: 19px;
              margin-left: 11px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
